<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.0/lib/index.css">
  <title>逾期未签约</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      background: #F2F2F2;
    }

    .top {
      background: #D7D7D7;
      height: 6.5em;
      position: fixed;
      width: 100%;
      top: 0;
    }

    .consultant {
      padding: 1em;
      line-height: 1em;
    }

    .van-cell {
      padding: 0.5em 1em;
    }

    .right {
      float: right;
      color: #027DB4;
    }

    .search {
      padding: 0 0.5em;
    }

    .main {
      padding: 1.5em 0.8em;
    }

    .panel {
      margin-bottom: 1.5em;
      border-radius: 1em;
      /* border:1px solid #02A7F0; */
      box-shadow: 0.3em 0.4em 0.4em #A5A5A5;
    }

    .blue {
      line-height: 1.5em;
      background: #02A7F0;
      color: #fff;
      border-top-left-radius: 1em;
      border-top-right-radius: 1em;
      padding: 0.5em 1em;
      border: 1px solid #02A7F0;
      word-break: break-all;
    }

    .list {
      background: #fff;
      padding-bottom: 1.5em;
      padding: 0 1em 1.5em 1em;
      border-bottom-left-radius: 1em;
      border-bottom-right-radius: 1em;
      border: 1px solid #02A7F0;
    }

    .van-row {
      padding-top: 0.5em;
    }

    .phone {
      vertical-align: bottom;
      border-radius: 0.25em;
      margin-right: 0.5em;
    }

    .text-right {
      text-align: right;
    }

    .gray {
      color: #7F7F7F;
    }

    .green {
      color: #008080;
    }

    .red {
      color: #D9001B;
    }

    [v-cloak] {
      display: none;
    }
  </style>
</head>

<body>
  <div id='container' v-cloak style="padding-top: 6.5em;">
    <div class="top">
      <p class='consultant'>
        <span>置业顾问</span>
        <span class='right' @click='sheetshow = true'>{{this.adviser}}</span>
      </p>
      <div class="search">
        <van-field v-model='query.customerName' placeholder="请输入客户姓名或电话" left-icon="search" @input='find'
          clearable />
      </div>
    </div>
    <div class="main">
      <div class="panel" v-for='item in list' :key='item.id'>
        <p class='blue'>{{item.combinedName}}</p>
        <div class="list">
          <van-row>
            <van-col span="12">{{item.customerName}}</van-col>
            <van-col class='text-right' span="12" @click.native="call(item)"><img class='phone' :src="hosturl+'/static/images/icon/phone.png'" alt="">{{item.customerPhone}}
            </van-col>
          </van-row>
          <van-row>
            <van-col span="12" class='gray'>置业顾问</van-col>
            <van-col class='text-right gray' span="12">{{item.userName}}</van-col>
          </van-row>
          <van-row>
            <van-col span="12" class='gray'>应转签约日期</van-col>
            <van-col class='text-right green' span="12">{{item.conversionSignDate |timeFilter}}</van-col>
          </van-row>
          <van-row>
            <van-col span="12" class='gray'>逾期天数</van-col>
            <van-col class='text-right' span="12"><b class='red'>{{item.overdueDay}}</b> 天</van-col>
          </van-row>
        </div>
      </div>
      <van-pagination v-model="currentPage" :page-count="totalPage" mode="simple" @change='search' />
    </div>

    <van-action-sheet v-model="sheetshow" :actions="opt" @select="onSelect" title='置业顾问'></van-action-sheet>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vant@2.0/lib/vant.min.js"></script>
</body>
<script>
  var Vue = window.Vue
  var vant = window.vant
  Vue.use(vant)
  new Vue({
    el: '#container',
    data: {
      currentPage:1,
      totalPage:0,
      hosturl:'',
      query: {
        consultantUserId: '',
        "projectCode": "${projectCode}",
        "projectId": "${projectId}",
        "userId": "${userId}",
        "token": "${token}",
        "pageNumber": "1",
        "pageSize": "10",
        "version": "${version}",
        "customerName": ""
      },
      adviser: '全部',
      sheetshow: false,
      list: [],
      opt: []
    },
    filters:{
      timeFilter(el){
        if(el){
          return el.substring(0,10)
        }
      }
    },
    created() {
      this.hosturl = 'http://' + window.location.host + '${request.contextPath}'
      //查询置业顾问
      const self = this
      const req = this.http()
      const data = {
        "params": {
          "terminalCode": "${terminalCode}",
          "merchantId": "${merchantId}",
          "projectId": "${projectId}",
          "userId": "${userId}",
          "token": "${token}",
          "version": "${version}",
          "projectCode": "${projectCode}"
        }
      }
      const url = JSON.stringify(data)
      req.open('POST', 'http://' + window.location.host + '${request.contextPath}/appapi/getConsultantList', false)
      req.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
      req.onreadystatechange = function () {
        if (req.readyState === 4 && req.status === 200) {
          const result = JSON.parse(req.responseText).resData
          if (result.result === '1') {
            self.opt = result.consultantList.map(el => {
              return {
                name: el.consultantUserName,
                consultantUserId: el.consultantUserId
              }
            })
            if (self.opt.length === 1) {
              self.query.consultantUserId = self.opt[0].consultantUserId
            } else {
              self.opt.unshift({
                name: '全部',
                consultantUserId: ''
              })
            }
            self.adviser = self.opt[0].name
            self.query.consultantUserId = self.opt[0].consultantUserId
          }
        }
      }
      req.send('body='+url)
      this.queryData()

    },
    methods: {
      call(item){
        location.href = "native://call_customer?customerName="+item.customerName+"&customerTel="+item.customerPhone+"&customerId=${customerId}"
      },
      search(val){
        this.query.pageNumber = val+''
        this.queryData()
      },
      queryData() {
        const self = this
        const data = {
          "params": self.query
        }
        const req = this.http()
        const url = JSON.stringify(data)
        req.open('GET', 'http://' + window.location.host + '${request.contextPath}/appapi/selectOverdueSignedPage?body='+url, false)
        req.onreadystatechange = function () {
          if (req.readyState === 4 && req.status === 200) {
            const result = JSON.parse(req.responseText)
            if (result.success) {
              self.totalPage = result.totalPages
              self.list = result.rows
            }
            // console.log(req.responseText)
          }
        }
        req.send(null)
      },
      http() {
        const req = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP')
        return req
      },
      onSelect(item) {
        this.adviser = item.name
        this.sheetshow = false
        this.query.consultantUserId = item.consultantUserId
        this.queryData()
      },
      find() {
        this.query.pageNumber = '1'
        this.currentPage = 1
        this.queryData()
      }
    }
  })
</script>

</html>